<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>订单详情-江城巴士</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="favicon.ico">
    
    <link rel="stylesheet" href="css/app.css">
</head>

<body>

<header>
    <div class="title">订单详情</div>
</header>

<section class="wrap order-box">
    <div class="box-info">
        <div class="hd">
            <em class="state6">已结束</em>
            <span>完成评价可获得优惠券</span>
        </div>
        <div class="detail">
            <div class="fromto">
                <em>光谷广场</em>
                <i class="goback"></i>
                <em>武昌火车站</em>
            </div>
            <div class="date">
                <em>出发时间</em>
                <em>返回时间</em>
            </div>
            <div class="time">
                <em>2015-10-22 13:22</em>
                <em>2015-10-25 13:22</em>
            </div>
            <div class="bus">
                <b>宝骏730（豪华商务七座）</b>
                <span>鄂TF0809</span>
                <i>|</i>
                <span>鄂TF0809</span>
                <i>|</i>
                <span>鄂TF0809</span>
                <i>|</i>
                <span>鄂TF0809</span>
            </div>
        </div>
        <dl>
            <dt>出行信息：</dt>
            <dd>
                <span>联系人</span>
                <em>老张</em>
            </dd>
            <dd>
                <span>联系方式</span>
                <em>15998982211</em>
            </dd>
            <dd>
                <span>出行类型</span>
                <em>单程</em>
            </dd>
            <dd>
                <span>发车时间</span>
                <em>2015-10-22 18:90</em>
            </dd>
            <dd>
                <span>返程时间</span>
                <em>2015-10-22 18:90</em>
            </dd>
            <dd>
                <span>乘车人数</span>
                <em>34人</em>
            </dd>
            <dd>
                <span>需要车辆</span>
                <em>4</em>
            </dd>
            <dd>
                <span>需要发票</span>
                <em>是（科技有限公司）</em>
            </dd>
        </dl>
        <dl>
            <dt>订单信息：</dt>
            <dd>
                <span>订单编号</span>
                <em>DD20151022189087133</em>
            </dd>
            <dd>
                <span>提交时间</span>
                <em>2015-10-20 15:00</em>
            </dd>
        </dl>
        <dl>
            <dt>报价详情：</dt>
            <dd class="extra">
                <div class="price">
                    <em id="priceTotal">&yen; 165.5</em>
                    <input type="hidden" value="165.5" id="price">
                </div>
                <div class="cost">
                    <div class="item">
                        <span>起步价</span>
                        <em>&yen; 8.0</em>
                    </div>
                    <div class="item">
                        <span>里程（44.5公里）</span>
                        <em>&yen; 98.0</em>
                    </div>
                    <div class="item">
                        <span>远途费（37.5）</span>
                        <em>&yen; 41.3</em>
                    </div>
                    <div class="item">
                        <span>高速费（不参与优惠）</span>
                        <em>&yen; 15.0</em>
                    </div>
                    <div class="item blue" id="couponsUsed">
                        <span>5元优惠券</span>
                        <em>- &yen; 5</em>
                    </div>
                </div>
            </dd>
        </dl>

        <div class="ft"></div>
        <div class="state state6"></div>
    </div>

    <div class="button">
        <a href="disclaimer.html">免责申明</a>
        <button type="button" class="ubtn ubtn-red" id="comments">评价</button>
    </div>

    <!-- <div class="share-tips">点此右上角分享可获得优惠券哦</div> -->

</section>

<div id="commentsbox" class="hide">
    <div class="hd">行程评价</div>
    <div class="hd-s">评价行程，即得优惠礼券</div>
    <div class="bd">
        <dl>
            <dt>司机服务</dt>
            <dd>
                <i class="star"><i></i><i></i><i></i><i></i><i></i></i>
                <input type="hidden" name="" class="star">
            </dd>
        </dl>
        <dl>
            <dt>汽车环境</dt>
            <dd>
                <i class="star"><i></i><i></i><i></i><i></i><i></i></i>
                <input type="hidden" name="" class="star">
            </dd>
        </dl>
        <dl>
            <dt>安全驾驶</dt>
            <dd>
                <i class="star"><i></i><i></i><i></i><i></i><i></i></i>
                <input type="hidden" name="" class="star">
            </dd>
        </dl>
        <dl>
            <dt>准时到达</dt>
            <dd>
                <i class="star"><i></i><i></i><i></i><i></i><i></i></i>
                <input type="hidden" name="" class="star">
            </dd>
        </dl>
    </div>
</div>

<script src="js/zepto.min.js"></script>
<script src="js/layer/layer.js"></script>
<script>
    $(function() {
        var modal = $('#commentsbox').html();

        $('#comments').on('click', function() {
            layer.open({
                content: modal
                ,className: 'popup'
                ,btn: ['取消', '确定']
                ,yes: function(index) {
                    layer.close(index);
                }
                ,no: function(index){
                    layer.open({
                        content: '<i class="ico ico-right2"></i><br /><br />评价成功！'
                        ,btn: '确定'
                    });
                }
            });
            
            return false;
        })

        $('body').on('touchstart', '.star i', function(e) {
            var idx = $(this).index();
            $(this).parent().find('i').each(function(i) {
                if (idx >= i) {
                    $(this).addClass('on');
                } else {
                    $(this).removeClass('on');
                }
            }).parent().next().val(1 + $(this).index());

            e.preventDefault();
        });

    
        $('body').on('touchstart', '.layui-m-layershade', function(e) {
            e.preventDefault();
        })
    })

</script>

</body>
</html>